<template>
    <div class="default-main">
        <el-row v-loading="state.loading" :gutter="20">
            <el-col class="xs-mb-20" :xs="24" :sm="16">
                <el-form
                    v-if="!state.loading"
                    ref="formRef"
                    @keyup.enter="onSubmit(formRef)"
                    :model="state.form"
                    :rules="state.rules"
                    :label-position="'top'"
                    :key="state.formKey"
                >
                    <el-tabs v-model="state.activeTab" type="border-card">
                        <el-tab-pane class="config-tab-pane" name="base" label="基础配置">
                            <div class="config-form-item">
                                <FormItem
                                    label="站点名称"
                                    prop="site_name"
                                    type="string"
                                    v-model="state.form.site_name"
                                    placeholder="站点名称"
                                />
                                <FormItem
                                    label="LOGO"
                                    prop="site_logo"
                                    type="image"
                                    v-model="state.form.site_logo"
                                    placeholder="站点名称"
                                />
                            </div>
                            <el-button :loading="state.submitLoading" type="primary" @click="onSubmit(formRef)">{{ $t('Save') }}</el-button>
                        </el-tab-pane>
                        <el-tab-pane class="config-tab-pane" name="assistant" label="AI助手配置">
                            <div class="config-form-item">
                                <FormItem
                                    label="AI助手名称"
                                    prop="ai_name"
                                    type="string"
                                    v-model="state.form.ai_name"
                                    placeholder="AI助手名称"
                                />
                                <FormItem
                                    label="问候语"
                                    prop="ai_greeting"
                                    type="textarea"
                                    v-model="state.form.ai_greeting"
                                    placeholder="问候语"
                                />
                                <FormItem
                                    label="AI助手头像"
                                    prop="ai_avatar"
                                    type="image"
                                    v-model="state.form.ai_avatar"
                                    placeholder="AI助手头像"
                                />
                                <FormItem
                                    label="聊天背景标题"
                                    prop="ai_chat_title"
                                    type="string"
                                    v-model="state.form.ai_chat_title"
                                    placeholder="问候语"
                                />
                            </div>
                            <el-button :loading="state.submitLoading" type="primary" @click="onSubmit(formRef)">{{ $t('Save') }}</el-button>
                        </el-tab-pane>
                        <el-tab-pane class="config-tab-pane" name="notice" label="公告配置">
                            <div class="config-form-item">
                                <FormItem
                                    label="公告弹窗是否显示"
                                    prop="notice_show"
                                    type="switch"
                                    v-model="state.form.notice_show"
                                    placeholder="公告弹窗是否显示"
                                />
                                <FormItem
                                    label="公告标题"
                                    prop="notice_title"
                                    type="string"
                                    v-model="state.form.notice_title"
                                    placeholder="公告标题"
                                />
                                <FormItem
                                    label="公告内容"
                                    prop="notice_content"
                                    type="editor"
                                    v-model="state.form.notice_content"
                                    placeholder="公告内容"
                                />
                            </div>
                            <el-button :loading="state.submitLoading" type="primary" @click="onSubmit(formRef)">{{ $t('Save') }}</el-button>
                        </el-tab-pane>
                        <el-tab-pane class="config-tab-pane" name="imageToCode" label="图转代码">
                            <FormItem
                                label="KYE密钥"
                                prop="image_code_key"
                                type="textarea"
                                v-model="state.form.image_code_key"
                                placeholder="KYE密钥"
                            />
                            <FormItem
                                label="接口地址"
                                prop="image_code_api_url"
                                type="string"
                                v-model="state.form.image_code_api_url"
                                placeholder="接口地址"
                            />
                            <el-button :loading="state.submitLoading" type="primary" @click="onSubmit(formRef)">{{ $t('Save') }}</el-button>
                        </el-tab-pane>
                    </el-tabs>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { uuid } from '/@/utils/random'
import FormItem from '/@/components/formItem/index.vue'
import { FormInstance } from 'element-plus'
import { index, save } from '/@/api/backend/ai/config'
import { buildValidatorData } from '/@/utils/validate'

const ratioValidator = (rule: any, val: number, callback: Function) => {
    let msg = '请填写 0-100 之间的数字'
    if (val != 0 && !val) {
        return callback(new Error(msg))
    }
    if (val < 0 || val > 100) {
        return callback(new Error(msg))
    }
    return callback()
}

const state = reactive({
    loading: false,
    form: {
        site_name: '',
        site_logo: '',
        ai_name: '',
        ai_greeting: '',
        ai_avatar: '',
        ai_chat_title: '',
        notice_show: '',
        notice_title: '',
        notice_content: '',
        image_code_key: '',
        image_code_api_url: '',
    },
    rules: {
        site_name: [buildValidatorData({ name: 'required', title: '站点名称' })],
        site_logo: [buildValidatorData({ name: 'required', title: 'LOGO' })],
        ai_name: [buildValidatorData({ name: 'required', title: '助手名称' })],
        ai_greeting: [buildValidatorData({ name: 'required', title: '问候语' })],
        ai_avatar: [buildValidatorData({ name: 'required', title: '助手头像' })],
        ai_chat_title: [buildValidatorData({ name: 'required', title: '聊天背景标题' })],
        notice_show: [buildValidatorData({ name: 'required', title: '公告弹窗是否显示' })],
        notice_title: [buildValidatorData({ name: 'required', title: '公告标题' })],
        notice_content: [buildValidatorData({ name: 'required', title: '公告内容' })],
    },
    formKey: uuid(),
    activeTab: 'base',
    submitLoading: false,
})

const formRef = ref<FormInstance>()

const onSubmit = (formRef?: FormInstance) => {
    if (!formRef) return
    formRef.validate((valid: boolean) => {
        if (valid) {
            state.submitLoading = true
            save(state.form)
                .then((res) => {})
                .finally(() => {
                    state.submitLoading = false
                })
        }
    })
}

index().then((res) => {
    state.form = res.data.data
})

defineOptions({
    name: 'cms/config',
})
</script>

<style scoped lang="scss">
.el-tabs--border-card {
    border: none;
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-border-radius-base);
}
.el-tabs--border-card :deep(.el-tabs__header) {
    background-color: var(--ba-bg-color);
    border-bottom: none;
    border-top-left-radius: var(--el-border-radius-base);
    border-top-right-radius: var(--el-border-radius-base);
}
.el-tabs--border-card :deep(.el-tabs__item.is-active) {
    border: 1px solid transparent;
}
.el-tabs--border-card :deep(.el-tabs__nav-wrap) {
    border-top-left-radius: var(--el-border-radius-base);
    border-top-right-radius: var(--el-border-radius-base);
}
.el-card :deep(.el-card__header) {
    height: 40px;
    padding: 0;
    line-height: 40px;
    border: none;
    padding-left: 20px;
    background-color: var(--ba-bg-color);
}
.config-tab-pane {
    padding: 5px;
}
.config-tab-pane-add {
    width: 80%;
}
</style>
